<template>
  <view class="box">
    <view class="container" v-if="dessertList.length > 0">
      <up-list enableFlex="true">
        <up-list-item v-for="item in dessertList" :key="item.id">
          <up-cell size="large" @click="goDessertDetail(item.id)">
            <template #icon>
              <up-image
                :src="`http://localhost:8080/api/files/${item.dessertImg}`"
                width="120rpx"
                height="120rpx"></up-image>
            </template>
            <template #title>
              <text style="font-size: 30rpx; font-weight: bold; color: #000">
                {{ item.dessertName }}
              </text>
            </template>
            <template #label>
              <text style="font-size: 26rpx; color: #bb7755; margin-top: 15rpx">
                ￥{{ item.dessertPrice }}
              </text>
            </template>
          </up-cell>
        </up-list-item>
      </up-list>
    </view>
    <up-empty mode="favor" v-else></up-empty>
  </view>
</template>

<script setup>
import { useUserStore } from '../../stores/user.js'
import { getStarListService } from '../../api/star.js'
import { ref } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'
const userStore = useUserStore()
// 遍历收藏列表数据，获取收藏甜品的数据
const dessertList = ref([])
const getDessertList = () => {
  const starList = userStore.starList || []
  starList.forEach(async (item) => {
    const res = await getStarListService(item.dessertId)
    dessertList.value.push(res.data)
  })
}
const refreshPage = () => {
  dessertList.value = []
  getDessertList()
}
onShow(() => {
  uni.$on('update', refreshPage())
})
onHide(() => {
  uni.$off('update')
})

// 跳转到甜品详情页
const goDessertDetail = (id) => {
  uni.navigateTo({
    url:
      '/pages/dessertDetail/dessertDetail?id=' +
      encodeURIComponent(JSON.stringify(id)),
  })
}
</script>

<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  .container {
    width: 90%;
    height: 90%;
    margin: 50rpx auto;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.08);
    overflow: auto;
    .empty {
      color: #666;
      margin: auto;
      text-align: center;
    }
  }
}
.box::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
</style>
